<template>
  <div class="chart-container" ref="chartRef"></div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRealtimeLineChart } from '@/views/ZhangLi/useRealtimeLineChart'

const props = defineProps<{
  data: {
    realtimeValues: number[] // 当前时刻每根钢丝绳的张力值
  } | null
}>()

const chartRef = ref<HTMLDivElement | null>(null)

const hookData = computed(() => {
  return props.data ? { values: [...props.data.realtimeValues] } : null
})

const { clearChart, setIsRunning } = useRealtimeLineChart(chartRef, hookData, {
  maxPoints: 50,
  chartName: '实时张力趋势',
})

// 暴露方法给父组件调用
defineExpose({ clearChart, setIsRunning })
</script>

<style scoped>
.chart-container {
  flex: 1;
  width: 100%;
  min-height: 300px;
  /* border-bottom: 1px solid #eee; */
}
</style>